<template>
  <el-radio-group v-model="radio" type="vertical" @change="redioChange">
    <el-radio label="1"> 通配符* </el-radio>
    <el-radio label="2"> 不指定 </el-radio>
    <el-radio label="3"> 本月最后一天 </el-radio>
    <el-radio label="4"> 本月最后一个工作日 </el-radio>
    <el-radio label="5"> 每月 <el-input-number v-model="monthly" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange('5')" /> 号最近的那个工作日 </el-radio>
    <el-radio label="6"
      >周期从 <el-input-number v-model="startNum" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange('6')" /> -
      <el-input-number v-model="endNum" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange('6')" /> 日
    </el-radio>
    <el-radio label="7"
      >从 <el-input-number v-model="startDay" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange('7')" /> 日开始,每
      <el-input-number v-model="everyDay" class="mx-4" :min="1" :max="10" controls-position="right" @change="redioChange('7')" /> 日执行一次
    </el-radio>
    <el-radio label="8">指定 </el-radio>
    <div style="margin-left: 40px">
      <el-checkbox-group v-model="checkList" class="checkGroup" size="small" @change="redioChange('8')">
        <el-checkbox label="1" />
        <el-checkbox label="2" />
        <el-checkbox label="3" />
        <el-checkbox label="4" />
        <el-checkbox label="5" />
        <el-checkbox label="6" />
        <el-checkbox label="7" />
        <el-checkbox label="8" />
        <el-checkbox label="9" />
        <el-checkbox label="10" />
        <el-checkbox label="11" />
        <el-checkbox label="12" />
        <el-checkbox label="13" />
        <el-checkbox label="14" />
        <el-checkbox label="15" />
        <el-checkbox label="16" />
        <el-checkbox label="17" />
        <el-checkbox label="18" />
        <el-checkbox label="19" />
        <el-checkbox label="20" />
        <el-checkbox label="21" />
        <el-checkbox label="22" />
        <el-checkbox label="23" />
        <el-checkbox label="24" />
        <el-checkbox label="25" />
        <el-checkbox label="26" />
        <el-checkbox label="27" />
        <el-checkbox label="28" />
        <el-checkbox label="29" />
        <el-checkbox label="30" />
        <el-checkbox label="31" />
      </el-checkbox-group>
    </div>
  </el-radio-group>
</template>
<script lang="ts" setup>
const radio = ref('1')
const day = ref('*')
const startNum = ref(1)
const endNum = ref(1)
const startDay = ref(1)
const everyDay = ref(1)
const monthly = ref(1)
const checkList = ref([])
const emit = defineEmits(['update:dayValue'])
let props = defineProps(['dayValue'])
const redioChange = (data: string) => {
  day.value = ''
  radio.value = data
  switch (data) {
    case '1':
      day.value = '*'
      break
    case '2':
      day.value = '?'
      break
    case '3':
      day.value = 'L'
      break
    case '4':
      day.value = 'LW'
      break
    case '5':
      day.value = monthly.value + 'W'
      break
    case '6':
      day.value = startNum.value + '-' + endNum.value
      break
    case '7':
      day.value = startDay.value + '/' + everyDay.value
      break
    case '8':
      if (checkList.value.length == 0) {
        day.value = '*'
      } else {
        day.value = checkList.value.join(',')
      }
      break
    default:
      break
  }
  emit('update:dayValue', day.value)
}
watch(props, () => {
  if (props.dayValue) {
    if (props.dayValue.indexOf('*') !== -1) {
      radio.value = '1'
    } else if (props.dayValue.indexOf('?') !== -1) {
      radio.value = '2'
    } else if (props.dayValue.indexOf('L') !== -1) {
      radio.value = '3'
    } else if (props.dayValue.indexOf('LW') !== -1) {
      radio.value = '4'
    } else if (props.dayValue.indexOf('W') !== -1) {
      monthly.value = parseInt(props.dayValue.split('W')[0])
      radio.value = '5'
    } else if (props.dayValue.indexOf('-') !== -1) {
      startNum.value = parseInt(props.dayValue.split('-')[0])
      endNum.value = parseInt(props.dayValue.split('-')[1])
      radio.value = '6'
    } else if (props.dayValue.indexOf('/') !== -1) {
      startDay.value = parseInt(props.dayValue.split('/')[0])
      everyDay.value = parseInt(props.dayValue.split('/')[1])
      radio.value = '7'
    } else if (props.dayValue.indexOf(',') !== -1) {
      checkList.value = props.dayValue.split(',')
      radio.value = '8'
    }
  }
})
</script>
<style lang="scss" scoped>
.el-radio-group {
  display: grid;
  flex-direction: column;
  margin: 0px;
}
.el-radio {
  margin: 2px 2px 2px 10px;
  padding: 2px;
}
.checkGroup {
  margin: 8px;
}
</style>
